<template>
	<view>
		<div class="zong">
			<carHeader :title="'活动发布'"></carHeader>
			<div class="body">
				<div class="bodyson">
					<uni-section title="">
						<view class="example">
							<uni-forms ref="valiForm" :rules="rules" :modelValue="valiFormData">
								<uni-forms-item style="font-weight: 600;" label="标题:" name="riTitle">
									<uni-easyinput style="font-weight: 200;" v-model="valiFormData.riTitle" placeholder="请输入标题" />
								</uni-forms-item>
								<uni-forms-item style="font-weight: 600;" label="内容:" name="riContent">
									<uni-easyinput style="font-weight: 200;" type="textarea" v-model="valiFormData.riContent"
										placeholder="请输入内容" />
								</uni-forms-item>
								<div style="font-weight: 600;">图片:</div>
								<div style="position: relative; top: -25px;left: 70px;">
										<u-upload
												:fileList="fileList1"
												@afterRead="afterRead"
												@delete="deletePic"
												name="1"
												multiple
												:maxCount="10"
												:previewFullImage="true"
											></u-upload>
								</div>
							</uni-forms>
							<div>
								<navigator url="/pages/activityAnnounce/activityAnnounce">
									<button class="button1"  type="primary" @click="submit('valiForm')">发布</button>
								</navigator>
							</div>
						</view>
					</uni-section>

				</div>

			</div>
		</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				fileList1:[],
				// 校验表单数据
				valiFormData: {
					riShopId:'',
					riTitle: '',
					riContent: '',
					riTime: {},
					riImage:'',
				},
				
				imageStyles: {
					width: 150,
					height: 100,
					border: {
						// color:"#ff5a5f",
						width: 2,
						style: 'solid',
						radius: '5px'
					}
				},	
				// 校验规则
				rules: {
					riTitle: {
						rules: [{
							required: true,
							errorMessage: '标题不能为空'
						}]
					},
				},
			}
		},
		onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数
				console.log(option); //打印出上个页面传递的参数。
				this.valiFormData.riShopId=option.riShopId
				//改时间数据格式
				this.timeNow = new Date();
				const formattedDate =`${this.timeNow.getFullYear()}-${this.padZero(this.timeNow.getMonth() + 1)}-${this.padZero(this.timeNow.getDate())} ${this.padZero(this.timeNow.getHours())}:${this.padZero(this.timeNow.getMinutes())}:${this.padZero(this.timeNow.getSeconds())}`;
				
				console.log(formattedDate);
				this.valiFormData.riTime=new Date(formattedDate);	
			},
		methods: {
				//时间格式转换
						padZero(num) {
							return num < 10 ? `0${num}` : num;
						},
			// 删除图片
						deletePic(event) {
							this[`fileList${event.name}`].splice(event.index, 1)
						},
						// 新增图片
						async afterRead(event) {
							// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
							let lists = [].concat(event.file)
							let fileListLen = this[`fileList${event.name}`].length
							lists.map((item) => {
								this[`fileList${event.name}`].push({
									...item,
									status: 'uploading',
									message: '上传中'
								})
							})
							for (let i = 0; i < lists.length; i++) {
								const result = await this.uploadFilePromise(lists[i].url)
								this.fileList1[0].url=result;
								let item = this[`fileList${event.name}`][fileListLen]
								this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
									status: 'success',
									message: '',
									url: result
								}))
								fileListLen++
							}
						},
						uploadFilePromise(url) {
							return new Promise((resolve, reject) => {
								let a = uni.uploadFile({
									url: 'http://localhost:8080/file/upload', // 仅为示例，非真实的接口地址
									filePath: url,
									name: 'file',
									formData: {
										user: 'test'
									},
									success: (res) => {
										setTimeout(() => {
											resolve(JSON.parse(res.data).data.url)
										}, 1000)
									}
								});
							})
						},
			submit(ref) {	
				this.$refs[ref].validate().then(res => {
					const formData = { ...res, riImage: this.valiFormData.riImage};
				this.valiFormData.riImage=this.fileList1[0].url
					uni.request({
						url:'http://localhost:8080/carShop/carShop/activity/add',
						header:{
							'content-type':'application/x-www-form-urlencoded',
						},
						method:'POST',
						data:this.valiFormData,
						success: (res) => {
							console.log(res)
						}
					}),
					uni.showToast({
						title: `活动发布成功`
					})
				}).catch(err => {
					console.log('err', err);
				})
			},
		}
	}
</script>

<style>
	.button1{
		border-radius: 30px;
		position: relative;
	/* 	top: 70px; */
	}
	.example {
		padding: 15px;
		background-color: #fff;
		/* 	border-radius: 20px; */
	}

	.segmented-control {
		margin-bottom: 15px;
	}

	.button-group {
		margin-top: 15px;
		display: flex;
		justify-content: space-around;
	}

	.form-item {
		display: flex;
		align-items: center;
	}

	.button {
		display: flex;
		align-items: center;
		height: 35px;
		margin-left: 10px;
	}


	.example-body {
		padding: 10px;
		padding-top: 0;
	}
	.zong {
		background-color: #eeeeee;
		width: 100%;
		height: 670px;
	}

	.body {
		height: 800rpx;
		background-color: #ffffff;
		border-radius: 20px;
		width: 350px;
		margin: 0 auto;
		position: relative;
		top: -120px;
	}

	.bodyson {
		width: 320px;
		/* 	background-color: aqua; */
		height: 800rpx;
		margin: 0 auto;
	}
</style>